﻿var category = ['违规外联', '拒绝服务', '漏洞利用', '随便吧啥', '随便吧啥1'];
// var barData = [0, ~~(Math.random() * 100), ~~(Math.random() * 100), ~~(Math.random() * 100), ~~(Math.random() * 100)];
var barData = [0,80, 77, 48, 21];
var lineData = [125, 125, 125, 125, 125]
var outlineData = [150, 150, 150, 150, 150]

// console.log(barData)
option50 = {
    backgroundColor: '#000',
    grid: [{
        left: '10',
        bottom: '20',
        top: 3,
        right: 30
    }],
    xAxis: {
        show: false
    },
    yAxis: {
        data: category,
        show: true,
        axisLabel: {
            inside: true,
            verticalAlign: 'middle',
            lineHeight: 1500,
            color: '#fff',
            fontSize: 20
        },
        axisLine: {
            show: true
        }
    },
    series: [
        { // 背景图
            name: '',
            type: 'pictorialBar',
            symbol: 'image://',
            barWidth: 100,
            data: outlineData,
            barGap: '-100%',
            z: -100,
            symbolOffset: [0, '-50%'],
            barCategoryGap: 0,
            // animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30;
            }
        },
        { // 蓝柱下面方块
            name: '',
            type: 'pictorialBar',
            symbol: 'rect',
            barWidth: '3%',
            symbolOffset: [120, -20],
            itemStyle: {
                normal: {
                    color: '#1F4683'
                }
            },
            z: -11,
            symbolRepeat: true,
            symbolSize: 20,
            data: lineData,
            barGap: 50,
            barCategoryGap: 0,
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30;
            }
        },
        { // 红柱下面方块
            name: '',
            type: 'pictorialBar',
            symbol: 'rect',
            barWidth: '3%',
            symbolOffset: [120, 20],
            itemStyle: {
                normal: {
                    color: '#1F4683'
                }
            },
            z: -11,
            // barWidth: 10,
            symbolRepeat: true,
            symbolSize: 20,
            data: lineData,
            // barGap: 50,
            barCategoryGap: 100,
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30;
            }
        },
        { // 蓝柱
            name: '', // blue bar
            type: 'pictorialBar',
            symbol: 'rect',
            barWidth: '3%',
            symbolOffset: [120, -20],
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: '#6DE8FA'
                }
            },
            symbolRepeat: true,
            symbolSize: 20,
            // symbolClip: true,
            data: barData,
            label: {
                normal: {
                    show: true,
                    formatter: function(value, index) {
                        console.log(arguments)
                        return `${value.value}`
                    },
                    position: 'right',
                    offset: [5, -20],
                    // offset: [0, 4],
                    color: '#6DE8FA',
                    fontSize: 20
                }
            },
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30 * 1.1
            }
        },
        { // 红柱
            name: '',
            type: 'pictorialBar',
            symbol: 'rect',
            symbolRepeat: true,
            symbolClip: true,
            symbolOffset: [120, 22],
            // symbolSize: ['80%', '80%'],
            symbolBoundingData: [-60, 40],
            // name: '', // red bar
            // type: 'pictorialBar',
            // symbol: 'rect',
            // barWidth: '3%',
            // symbolOffset: [120, 20],
            itemStyle: {
                normal: {
                    barBorderRadius: 5,
                    color: '#ed3e6d'
                }
            },
            // symbolRepeat: true,
            // // "symbolRepeat": "fixed",
            symbolSize: 20,
            // symbolClip: true,
            data: barData, // barData,
            label: {
                normal: {
                    show: true,
                    formatter: function(value, index) {
                        console.log(arguments)
                        return `${value.value}`
                    },
                    position: 'right',
                    offset: [5, 22],
                    color: '#ed3e6d',
                    fontSize: 20
                }
            },
            animationEasing: 'elasticOut',
            animationDelay: function(dataIndex, params) {
                return params.index * 30 * 1.1
            }
        }
    ],
    animation: true
}
